<template>
    <div class="admin-index">
        {{account}}登录成功,编号是{{userId}}

        <div class="con">

            <div class="left">
                <el-row class="tac">
                    <el-col :span="24">
                        <h5>自定义颜色</h5>
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b"
                                :router=true>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>用户管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="admin">用户信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminResetDel">已删除用户恢复</el-menu-item>
                                    <el-menu-item index="1-3" route="adminResetLock">黑名单恢复</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span >宠物管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="adminPet">宠物信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminPetAdd">添加宠物信息</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="3" >
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <span >领养管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="adminAdoption">领养宠物信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminPermissionAdopation">批准领养宠物信息</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-setting"></i>
                                    <span >寄养管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="adminPetstorage">寄养宠物信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminPermissionPetStorage">批准寄养宠物信息</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>


            <div class="info">
            <div class="search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="id">
                        <el-input v-model="formInline.id" placeholder="id"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="formInline.uname" placeholder="用户名"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" @click="deleteUserArray">批量删除</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="right-bo">
                <el-table
                        :data="tableData"
                        border
                        ref="multipleTable"
                        @selection-change="handleSelectionChange"
                        style="width: 100% ;">
                    <el-table-column type="selection" label="序号">
                    </el-table-column>

                    <el-table-column
                            prop="id"
                            label="id"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="account"
                            label="账户"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="uname"
                            label="用户名"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="avatar"
                            label="头像"
                            width="120">
                        <template slot-scope="scope"><!--slot-scope:作用域插槽，获取父组件的数据   path-->
                            <img style="width: 100px;height: 100px" :src="require('@/assets/img/'+scope.row.avatar)">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="age"
                            label="性别"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="sex"
                            label="年龄"
                            width="50">
                    </el-table-column>
                    <el-table-column
                        prop="addr"
                        label="地址"
                        width="100">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="手机号"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="email"
                            label="邮箱"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            prop="role"
                            label="身份"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope" ><!--slot-scope：作用域插槽，可以获取父组件的数据-->
                        <el-button  type="primary" @click="delUser(scope.row.id)">删除</el-button>
                        <el-button  type="primary" @click="pushHei(scope.row.id)">拉入黑名单</el-button>
                        </template>

                    </el-table-column>

                </el-table>
                <el-pagination
                        @current-change="changePage"
                        background
                        layout="prev, pager, next"
                        :total="1000">
                </el-pagination>
            </div>
        </div>
        </div>
    </div>
</template>
<style scoped>

    .con{
        display: flex;
    }
    .left {
        width: 10%;
        background-color: antiquewhite;
    }


    .info{
        display:block;
        width: 100%;
        background-color: #2c3e50;
    }
    .right-bo {
        width: 90%;
        margin-left: 10px;
        background-color: #42b983;
    }
</style>
<script>
    export default {
        name: "admin",
        data(){
            return {
                account: '',
                userId: '',
                tableData: [],
                index: 1,
                formInline: {
                    id:"",
                    uname:"",
                },
                multipleTable:[],
                delArr:[]


            }
    },
        mounted() {//钩子函数

            // 从sessionStore中获取数据
            this.userId=sessionStorage.getItem("userId");
            this.account=sessionStorage.getItem("account");

            console.log("vue-index.vue   钩子函数")
            console.log(this.account)
            this.$http.get("http://localhost:8081/user/getAllUser?index"+this.index+"&status="+0+"").then(req => {
                console.log("get"+"  "+this.index)
                //给data中的tableDat赋值
                this.tableData=req.data.list;
                this.index=req.data.index;
            })
        },
        methods: {
          deleteUserArray(){
                const length = this.multipleSelection.length
                console.log(length)
                for (let i = 0; i < length; i++) {
                    this.delArr.push(this.multipleSelection[i].id);
                }
                console.log(this.delArr)
                if(this.delArr.length > 0) {
                    var strs = this.delArr.join(",")
                    this.$http.get("http://localhost:8081/user/delArr?ids="+strs).then(req => {
                        if(req.data){
                            alert("批量删除成功")
                            this.$http.get("http://localhost:8081/user/getAllUser?index"+this.index+"&status="+0+"").then(req => {
                                console.log("get"+"  "+this.index)
                                //给data中的tableDat赋值
                                this.tableData=req.data.list;
                                this.index=req.data.index;
                            })
                        }
                    })
                }else{
                    alert("未选中数据")
                }

            },
          handleSelectionChange(val){
              this.multipleSelection = val;//存储选中的数据
              console.log(val);
          },
            delUser(id){
                    this.changeUserStatus(id,2)
            },
            pushHei(id){
                this.changeUserStatus(id,1)
            },
            resetStatus(id){
                this.changeUserStatus(id,0)
            },
            changeUserStatus(id,status){
                this.$http.get("http://localhost:8081/user/changeUserStatus?id="+id+"&status="+status+"").then(req => {
                    if(req.data){
                        this.$http.get("http://localhost:8081/user/getAllUser?index"+this.index+"&status="+0+"").then(req => {
                            console.log("get"+"  "+this.index)
                            //给data中的tableDat赋值
                            this.tableData=req.data.list;
                            this.index=req.data.index;
                        })
                    }
                })
            },
            onSubmit(){
                console.log(this.formInline)
                if(this.formInline.id==""&&this.formInline.uname==""){
                    console.log("查询全部")
                    this.$http.get("http://localhost:8081/user/getAllUser?index"+1+"&status="+0+"").then(req => {
                        //给data中的tableDat赋值
                        this.tableData=req.data.list;
                        this.index=1;
                    })
                }else if(this.formInline.id!=""&&this.formInline.uname==""){
                    console.log("id查询")
                    this.$http.get("http://localhost:8081/user/findUserById?id="+this.formInline.id+"&status="+0+"").then(req => {
                        console.log(req.data)
                        //给data中的tableDat赋值
                       this.tableData=req.data;

                    })
                }else if(this.formInline.id==""&&this.formInline.uname!=""){
                    console.log("uname查询")
                    this.$http.get("http://localhost:8081/user/findUserByUname?info="+this.formInline.uname+"&status="+0+"").then(req => {
                        console.log(req.data)
                        //给data中的tableDat赋值
                        this.tableData=req.data;

                    })
                }else{
                    alert("单个条件查询")
                }

            },

            changePage(index){
                this.$http.get("http://localhost:8081/user/getAllUser?index="+index+"&status="+0+"").then(req=>{
                    //从后台的map中获取list给data中的tableData赋值
                    this.tableData=req.data.list;
                    //从后台的map中获取index给data中的index赋值
                    this.index=req.data.index;
                })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

